<template>
  <div class="password-reset">
    <el-dialog custom-class="record-dialog" :show-close="false" title="重置密码" :visible.sync="visible" width="500px">
      <el-form ref="form" label-position="right" label-width="95px" :model="form" :rules="rules">
        <el-form-item label="邮箱：" prop="email">
          <el-input v-model="form.email" placeholder="请输入电子邮箱" />
        </el-form-item>

        <el-form-item label="新密码：" prop="password">
          <el-input ref="password" v-model.trim="form.password" placeholder="请输入新密码" :type="passwordType" />
          <span v-if="passwordType === 'password'" class="show-password" @click="handlePassword">
            <vab-icon :icon="['fas', 'eye-slash']" />
          </span>
          <span v-else class="show-password" @click="handlePassword">
            <vab-icon :icon="['fas', 'eye']" />
          </span>
        </el-form-item>

        <el-form-item label="重复密码：" prop="password2">
          <el-input ref="password2" v-model.trim="form.password2" placeholder="请重复密码" type="password" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { isEmail, isPassword } from '@/utils/validate'
  import { resetPassword } from '@/api/user'

  export default {
    name: 'PasswordReset',
    data() {
      const validateEmail = (rule, value, callback) => {
        if (!isEmail(value)) {
          callback(new Error('请输入正确的邮箱'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (!isPassword(value)) {
          callback(new Error('密码不能少于6位'))
        } else {
          callback()
        }
      }
      const validatePassword2 = (rule, value, callback) => {
        if (value !== this.form.password) {
          callback(new Error('密码不一致'))
        } else {
          callback()
        }
      }
      return {
        visible: false,
        email: '',
        passwordType: 'password',
        form: {
          email: '',
          password: '',
          password2: '',
        },
        rules: {
          email: [
            {
              required: true,
              trigger: 'blur',
              validator: validateEmail,
            },
          ],
          password: [
            {
              required: true,
              trigger: 'blur',
              validator: validatePassword,
            },
          ],
          password2: [
            {
              required: true,
              trigger: 'blur',
              validator: validatePassword2,
            },
          ],
        },
      }
    },
    methods: {
      showDialog() {
        this.visible = true
      },
      hideDialog() {
        this.$refs.form.clearValidate()
        this.visible = false
      },
      confirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const params = {
              email: this.form.email,
              password: this.form.password,
            }
            resetPassword(params)
              .then((res) => {
                console.log(res)
              })
              .catch((e) => {
                console.log(e)
              })
          }
        })
      },
      cancel() {
        this.hideDialog()
      },
      handlePassword() {
        this.passwordType === 'password' ? (this.passwordType = '') : (this.passwordType = 'password')
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  ::v-deep .el-dialog.record-dialog {
    .el-dialog__header {
      padding: 15px 15px 0;
      font-size: 14px;
    }
    .el-dialog__body {
      border-top: none;
      padding: 15px;
      font-size: 14px;
    }
    .el-dialog__footer {
      border-top: none;
      padding: 0 10px 10px;
    }
  }

  .show-password {
    position: absolute;
    top: 2px;
    right: 20px;
    font-size: 16px;
    color: #d7dee3;
    cursor: pointer;
    user-select: none;
  }
</style>
